<!DOCTYPE html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie-edge">
    <title>No JS Demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Internal CSS styles -->
    <style type="text/css">
        /* CSS styles */
        /* Example by llgruff at https://codepen.io/llgruff/pen/ZGBxOa */

        /* Apply the 'Helvetica' font to all elements */
        * {
            font-family: Helvetica, sans-serif;
        }

        /* Style for the tab container */
        div.tab-frame {
            border: 2px solid black;
            display: inline-block;
            padding: 10px 10px;
        }

        /* Hide the radio input elements */
        div.tab-frame input {
            display: none;
        }

        /* Style for the labels that serve as tabs */
        div.tab-frame label {
            display: block;
            float: left;
            padding: 5px 10px;
            cursor: pointer;
            margin-bottom: 5px;
            border-radius: 5px;
            box-shadow: 2px 2px 4px rgba(163, 163, 163, 0.247);
        }

        /* Style for the selected tab label */
        div.tab-frame input:checked + label {
            background: black;
            color: white;
            cursor: default;
        }

        /* Style for the content tabs */
        div.tab-frame div.tab {
            display: none;
            padding: 5px 10px;
            clear: left;
        }

        /* Style for individual tab content */
        div.tab-frame div.tab {
            padding: 5px 10px;
            text-align: center;
            background-color: rgba(158, 158, 158, 0.185);
            border: 1px solid rgba(148, 148, 148, 0.267);
            border-radius: 5px;
            /* Uncomment the following line to add a box shadow */
            /* box-shadow: 2px 2px 4px rgba(173, 173, 173, 0.432); */
        }

        /* Show the corresponding content tab when a radio input is checked */
        div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
        div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
        div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3) {
            display: block;
        }
    </style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<h2>It is a simple tabs model. Only CSS. Without js, bugs, position-absolute.</h2><br/><br/>

<!-- Tabbed content container -->
<div class="tab-frame">
    <input type="radio" checked name="tab" id="tab1">
    <label for="tab1" style="margin-right:5px;">Tab 1</label>

    <input type="radio" name="tab" id="tab2">
    <label for="tab2" style="margin-right:5px;">Tab 2</label>

    <input type="radio" name="tab" id="tab3">
    <label for="tab3">Tab 3</label>

    <!-- Content for the tabs -->
    <div class="tab">Sample content 1</div>
    <div class="tab">Sample content 2</div>
    <div class="tab">Sample content 3</div>
</div>
</body>
</html>

